<template>
  <div id="app">
    <div id="header">
      <router-link to="/" class="logo">
        <img src="./assets/logo.png">
        <span>golang+vue2</span>
      </router-link>
      <ul id="nav">
        <li v-if="user===null">
          <router-link to="/login">登录 /</router-link>
          <router-link to="/register">注册</router-link>
        </li>

        <li class="nav-dropdown-container" v-if="user!==null"
            v-on:mouseover="dropdownShow($event, 1)" v-on:mouseout="dropdownHide($event, 1)">
          <a class="ui link nav-user">
            <img v-bind:src="user.avatar" class="ui avatar image nav-avatar">
            <span>{{ user.nick }}</span>
            <span class="arrow"></span>
          </a>
          <ul class="nav-dropdown" ref="dropdown1">
            <li>
              <ul>
                <li><a class="nav-link" v-on:click="profile">个人资料</a></li>
                <li>
                  <router-link class="nav-lick" to="/message">消息({{ unread }})</router-link>
                </li>
                <li><a class="nav-link" v-on:click="logout">退出</a></li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </div>
    <div id="main">
      <router-view></router-view>
    </div>

  </div>
</template>

<script>
  import {mapActions, mapGetters} from 'vuex'
  export default {
    name: 'app',
    data () {
      return {}
    },
    created () {
      this.getWs()
    },
    watch: {
      // 如果路由有变化，会再次执行该方法
      // '$route': 'getUser'
    },
    computed: {
      ...mapGetters(['user', 'unread', 'ws', 'token'])
    },
    methods: {
      ...mapActions(['getUser', 'getWs']),
      dropdownShow ($event, index) {
        this.$refs['dropdown' + index].style.display = 'block'
      },
      dropdownHide ($event, index) {
        this.$refs['dropdown' + index].style.display = 'none'
      },
      profile () {
        this.$router.push('/profile')
      },
      logout () {
        this.user = null
        this.$store.commit('updateToken', '')
        this.$store.commit('updateUser', null)
        this.$router.push('/')
      }
    }
  }

</script>

<style>
  body {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

  }

  #app {
    margin: 0 auto;
    width: 1040px;
  }

  a {
    text-decoration: none;
    color: #34495e;
  }

  #header {
    top: 10px;
    height: 50px;
    box-shadow: 0 0 0 rgba(0, 0, 0, 0.25);
    margin: 0 auto;
    padding: 10px 60px;
    z-index: 100;
    color: #2c3e50;
  }

  #header .logo {
    display: inline-block;
    font-size: 1.5em;
    line-height: 40px;
    font-weight: 500;
  }

  #header .logo img, .nav-avatar {
    height: 40px;
    width: 40px;
    margin-right: 6px;
    vertical-align: middle;
  }

  #nav {
    float: right;
    list-style-type: none;
    margin: 0;
    padding: 0;
    line-height: 40px;
  }

  #nav .arrow {
    display: inline-block;
    vertical-align: middle;
    margin-top: -1px;
    margin-left: 6px;
    margin-right: -14px;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid #ccc;
  }

  #nav li {
    display: inline-block;
    position: relative;
    margin: 0 0.6em;
  }

  #nav .nav-dropdown {
    display: none;
    box-sizing: border-box;
    max-height: calc(100vh - 61px);
    overflow-y: auto;
    position: absolute;
    top: 100%;
    right: -15px;
    background-color: #fff;
    padding: 10px 0;
    border: 1px solid #ddd;
    border-bottom-color: #ccc;
    text-align: left;
    border-radius: 4px;
    white-space: nowrap;
    z-index: 100;
  }

  #nav .nav-link, .nav-user {
    cursor: pointer;
  }

  .nav-link {
    padding-bottom: 3px;
    white-space: nowrap;
  }

  #nav .nav-dropdown li {
    line-height: 1.8em;
    margin: 0;
    display: block;
  }

  #nav .nav-dropdown li > ul {
    padding-left: 0;
  }

  #nav .nav-dropdown a, #nav .nav-dropdown h4 {
    padding: 0 24px 0 20px;
  }

  #nav .nav-dropdown a {
    color: #3a5169;
    font-size: 0.9em;
    display: block;
  }

  #nav .nav-dropdown a:hover {
    color: #42b983;
  }

  #main {
    position: fixed;
    top: 50px;
    height: auto;
    z-index: 1;
    color: #2c3e50;
  }
</style>
